<template>
	<view>
		<view class="position-relative">
			<view class="button-box flex align-center justify-between px-2 position-absolute" :style="{top:statusBarH}">
				<view class="left-btn rounded-circle flex align-center justify-center" @click="onBack">
					<text class="iconfont icon-fanhui text-white font-lg"></text>
				</view>
				<view class="right-btn rounded-circle flex align-center justify-center">
					<text class="iconfont icon-gengduo1 text-white font-lg"></text>
				</view>
			</view>
			<image class="detail-info-img w-100" :src="info.titlepic" mode="aspectFill"></image>
			<view class="detail-title position-absolute flex">
				<image class="detail-cover rounded" :src="info.titlepic" mode="aspectFill"></image>
				<view class="detail-info-title font-md ml-2">#{{info.title}}#</view>
			</view>
			<view class="mt-4 py-3 px-2">
				<view class="text-muted">动态 {{info.post_count}}  今日 {{info.todaypost_count}}</view>
				<view class="text-light-muted ">{{info.desc}}</view>
			</view>
		</view>
		<divider />
	</view>
</template>
<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			},
		},
		created() {
			console.log('info',this.info)
		},
		data() {
			return {
				statusBarH:statusBarHeight
			}
		},
		methods:{
			onBack() {
				uni.navigateBack({delta:1})
			}
		}
	}
</script>
<style lang="scss">
	.detail-info-img {
		height: 300rpx;
		filter: blur(5rpx);
	}
	.button-box {
		left: 0;
		right: 0;
		z-index: 999;
	}
	.left-btn,.right-btn {
		width: 66rpx;
		height: 66rpx;
		background-color: rgba(0,0,0,.5);
	}
	.detail-title {
		top: 222rpx;
		left: 20rpx;
		z-index: 999;
		.detail-cover {
			width: 140rpx;
			height: 140rpx;
		}
		.detail-info-title {
			align-self: flex-end;
		}
	}
</style>